import i18n from 'i18n-js';
import React from 'react';
import { Text, View, Image } from '@tarojs/components';
import {
  DynamicColors,
  GDynamicValue,
  GStyleSheet,
  ThemeCompetent,
  useDynamicValue,
} from '@/utils/DarkMode';

const dStepStyles = GStyleSheet.create({
  container: {
    flexDirection: 'row',
  },
  title: {
    fontSize: 14,
    color: new GDynamicValue('#333', '#999'),
    top: -6,
    fontWeight: 'bold',
  },
  box: {
    // minHeight: 50,
    marginTop: 12,
  },
  tips: {
    fontSize: 13,
    color: new GDynamicValue('#333', '#999'),
  },
  content: {
    flex: 1,
    marginTop: 10,
    marginBottom: 10,
    paddingLeft: 15,
    paddingRight: 15,
    paddingTop: 20,
    paddingBottom: 20,
    borderRadius: 10,
    backgroundColor: DynamicColors.stepColor,
  },
  flag: {
    width: 30,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  point: {
    width: 10,
    height: 10,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: new GDynamicValue('#848484', '#ddd'),
  },
  line: {
    width: 1,
    flex: 1,
    backgroundColor: '#ddd',
  },
  image: {
    marginTop: 10,
    height: 170,
    width: 300,
  },
  imageView: {
    borderBottomColor: new GDynamicValue('#F4F4F4', '#232323'),
    borderBottomWidth: 1,
    borderBottomStyle: 'solid',
  },
  view: {
    backgroundColor: DynamicColors.stepColor,
    paddingBottom: 20,
    borderRadius: 10,
  }
});

interface IProps {
  step: any;
  stepStyle?: any;
  boxStyle: any;
}

function url2CosUrl(url: string) {
  if (url.startsWith('https://developer.gizwits.com/siteApi/')) {
    return `https://xbgroup-1251025085.cos.ap-guangzhou.myqcloud.com/${url.slice(
      38
    )}`;
  }
  return url;
}

@ThemeCompetent
class Step extends React.PureComponent<IProps> {
  renderBox = () => {
    const stepStyles = dStepStyles.style;
    const {
      step: { tips, image, renderBox },
    } = this.props;
    if (renderBox) {
      return renderBox();
    }
    return [
      tips ? (
        <Text key='text' style={stepStyles.tips}>
          {tips}
        </Text>
      ) : null,
      image ? (
        <Image
          key='image'
          src={url2CosUrl(image)}
          style={stepStyles.image}
          mode='aspectFit'
        />
      ) : null,
    ];
  };

  render() {
    const stepStyles = dStepStyles.style;
    const {
      step: { title },
      stepStyle,
      boxStyle,
    } = this.props;
    return (
      <View style={stepStyles.container}>
        <View style={{ ...stepStyles.content, ...stepStyle }}>
          {title && <Text style={stepStyles.title}>{title}</Text>}
          <View style={{ ...stepStyles.box, ...boxStyle }}>{this.renderBox()}</View>
        </View>
      </View>
    );
  }
}

const OnlyOne = ({ step: { image, tips, renderBox } }: { step: any }) => {
  const color = useDynamicValue(DynamicColors.normalTextColor);
  const onlyStyles = dStepStyles.useDynamicStyle();
  return (
    <View style={onlyStyles.view}>
      {renderBox
        ? renderBox()
        : [
          image ? (
            <View style={onlyStyles.imageView}>
              <Image
                key='image'
                mode='aspectFit'
                src={url2CosUrl(image)}
                style={onlyStyles.image}
              />
            </View>
          ) : null,
          tips ? (
            <View
              style={{
                alignItems: 'center',
                marginTop: 15,
                paddingLeft: 15,
                paddingRight: 15
              }}
            >
              <Text key='text' style={{ color }}>
                {tips}
              </Text>
            </View>
          ) : null,
        ]}
    </View>
  );
};

const Steps = ({ data, stepStyle }: { data: any[]; stepStyle?: any }) => {
  const geTen = data.length > 10;
  return (
    <View style={{ width: '100%', overflow: 'hidden' }}>
      {data.map((item, index) => {
        if (data.length === 1) {
          return <OnlyOne key='onlyOne' step={item} />;
        }
        return (
          <Step
            // eslint-disable-next-line react/no-array-index-key
            key={index}
            step={{
              ...item,
              title: i18n.t('STEP_NUM', {
                num: geTen ? index + 1 : i18n.t(`NUM_${index + 1}`),
              }),
            }}
            stepStyle={stepStyle}
            boxStyle={index + 1 === data.length ? { marginBottom: 0 } : {}}
          />
        );
      })}
      <View />
    </View>
  );
};

export default Steps;
